<template>
  <div class="filter-group">
    <el-form :inline="true">
      <el-form-item
        v-for="(filter,filteridx ) in filters"
        :key="filteridx"
        v-bind="filter.props"
      >
        <el-input v-if="filter.type==='input'" v-model="filter.value" @input="onChange" />
        <el-select v-if="filter.type==='select'" v-model="filter.value" v-bind="filter.componentpoprs" @change="$emit('onChange', paramsGen())">
          <el-option
            v-for="(option,optionidx ) in filter.children"
            :key="optionidx"
            :value="option.value"
            :label="option.label"
          />
        </el-select>
      </el-form-item>
      <el-button
        v-for="btn in btns"
        :key="btn.key"
        v-bind="btn.props"
        @click="$emit('onBtnClick',btn.key,paramsGen())"
      >{{ btn.name }}</el-button>
    </el-form>
  </div>
</template>

<script>
import { debounce } from '@/utils/index.js'
export default {
  name: 'FilterGroup',
  components: {

  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    filters: {
      type: Array
    },
    // eslint-disable-next-line vue/require-default-prop
    btns: {
      type: Array
    }
  },
  data () {
    return {

    }
  },
  created () {

  },
  methods: {
    //   生成表单内容
    paramsGen () {
      const res = {}
      for (const filter of this.filters) {
        res[filter.key] = filter.value
      }
      return res
    },
    onChange: debounce(function () {
      this.$emit('onChange', this.paramsGen())
    }, 1000
    )
  }
}

</script>

<style lang="scss" scoped>
.right{
  float: right !important
}
</style>
